<template>
  <el-tabs v-model="activeName" v-loading="loading">
    <el-tab-pane label="静止报警" name="standstill">
      <el-card class="box-card">
        <el-form ref="standstillParam" :model="standstillParam" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="静止时长超过" prop="stoptime" :rules="[
                   {required: true, message:'静止时长超过不能为空', trigger:'blur'}
                  ]">
                <el-select v-model="standstillParam.stoptime" placeholder="请选择时长" style="width: 100%;">
                  <el-option v-for="item in $dictUtils.getDictList('lora_stop_time')" :key="item.value"
                    :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="uni-unit">
              分钟后报警
            </el-col>
            <!-- <el-col :span="14">
              <el-form-item label="触发对象" prop="departIds" :rules="[
                {required: true, message:'触发对象不能为空', trigger:'blur'}
              ]">
                <el-input v-model="standstillParam.departIds" placeholder="部门 员工 访客"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="19">
              <el-form-item label="触发对象" prop="departIds"
                :rules="[
                  {required: true, message:'触发对象不能为空', trigger:'blur'}
                ]">
                <div class="block">
                  <CasCader
                    style="width:100%"
                    url = "/lora/user/jfLoraDepart/treeData"
                    :value="standstillParam.departIds"
                    :clearable="true"
                    :accordion="true"
                    :extend = "departExtend"
                    placeholder="请选择触发部门"
                    @getValue="(value) => {standstillParam.departIds=value}"/>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="19">
              <el-form-item label="取消报警区域" prop="areaNoAlarm"
                  :rules="[
                    {required: true, message:'区域不能为空', trigger:'blur'}
                   ]">
                   <div class="block">
                     <CasCader
                       style="width:100%"
                       url = "/lora/area/jfLoraArea/treeData"
                       :value="standstillParam.areaNoAlarm"
                       :clearable="true"
                       :accordion="true"
                       :props="{ multiple: true, checkStrictly: true, value: 'id', label: 'name', children: 'childNodes'}"
                       placeholder="请选择区域"
                       @getValue="(value) => {standstillParam.areaNoAlarm=value}"/>
                   </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="生效时间段" prop="timeRange" :rules="[
                {required: true, message:'生效时间段不能存在空数据', trigger:'blur'}
              ]">
                <el-button type="success" icon="el-icon-plus" circle @click="addTimeRange"
                  v-if="standstillParam.timeRange.length === 0"></el-button>
                <div v-for="(item,index) in standstillParam.timeRange">
                  <el-col :span="18">
                    <el-form-item label="" prop="time" :rules="[
                    ]">
                      <el-time-picker is-range v-model="standstillParam.timeRange[index]" range-separator="至"
                        start-placeholder="开始时间" value-format="HH:mm:ss" end-placeholder="结束时间" placeholder="选择时间范围">
                      </el-time-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" >
                    <el-button type="danger" icon="el-icon-minus" circle @click="deleteTimeRange(index)"
                      style="margin: 3px;"></el-button>
                    <el-button type="success" icon="el-icon-plus" circle
                      v-if="index === standstillParam.timeRange.length-1" @click="addTimeRange" style="margin: 3px;">
                    </el-button>
                  </el-col>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="doSubmitBack()">保存</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import ElUploadExt from '@/components/elUploadExt'
  import CasCader from '@/components/cascader'
  export default {
    data() {
      return {
        activeName: 'standstill',
        loading: false,
        standstillParam: {
          stoptime: "15",
          departIds: '',
          areaNoAlarm: '',
          timeRange: [['00:00:00', '23:59:59']],
        },
        departExtend: [{
          id: 'fangke',
          name: '外施访客'
        },{
          id: 'waibaojiediao',
          name: '外包借调'
        },{
          id: 'truck',
          name: '外来车辆'
        }]
      }
    },
    activated() {
      this.refreshList()
    },
    components: {
      ElUploadExt,
      CasCader
    },
    methods: {
      addTimeRange() {
        this.standstillParam.timeRange.push(['00:00:00', '23:59:59'])
      },
      deleteTimeRange(index) {
        this.standstillParam.timeRange.splice(index, 1);
      },
      // 获取数据列表
      refreshList() {
        this.$http({
          url: '/smis/config/jfConfig/queryByKey',
          method: 'post',
          params: {
            'keyStr': "standstillParam"
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            for (var key in (data.data || {})) {
              if (this.standstillParam.hasOwnProperty(key)) {
                this.standstillParam[key] = data.data[key]
              }
            }
          }
        })
      },
      doSubmitBack() {
        this.loading = true
        this.$http({
          url: `/smis/config/jfConfig/saveConfig`,
          method: 'post',
          data: {
            keyStr: "standstillParam",
            valueStr: JSON.stringify(this.standstillParam)
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.$message.success(data.msg)
            this.refreshList()
          }
          this.loading = false
        })
      }
    }
  }
</script>
<style type="text/css">
  .uni-unit {
    line-height: 40px;
    font-size: 14px;
    color: #606266;
  }
</style>
